<template>
  <div>
    <n-card :bordered="false">
      <!-- 操作按钮 -->
      <OperationMenu
        :fileType="fileType"
        :filePath="filePath">
      </OperationMenu>
      <BreadCrumb
          :file-path="filePath"
          :file-type="fileType">
      </BreadCrumb>
      <FileGrid
          :fileType="fileType"
          :filePath="filePath"
          :fileList="fileList"
          :loading="loading"
          @getTableDataByTypeEvent="getTableDataByType"
      ></FileGrid>
      <n-pagination  style="padding-top: 10px" size="small" show-size-picker
                     :prefix="getTotalNum"
                     v-model:page="pageData.currentPage"
                     :page-size="pageData.pageCount"
                     :item-count="pageData.total"
                     :page-sizes="[10, 50, 100, 200]"
                     :on-update:page-size="handleSizeChange"
                     :on-update:page="handleCurrentChange"/>
    </n-card>
  </div>
  <AddFolderDialog ref="addFolderDialog"></AddFolderDialog>
  <BoxMask ref="imgPreviewRef"></BoxMask>
  <DeleteDialog ref="deleteDialogRef"></DeleteDialog>
  <VideoBox ref="videoBoxRef"></VideoBox>

  <!--音频播放器-->
  <n-modal
      v-model:show="showModal"
      class="custom-card"
      preset="card"
      :style="bodyStyle"
      :title="audioOption.name"
      size="huge"
      :bordered="false"
      :segmented="segmented"
  >
      <AudioPlayer
          :option="audioOption"
      />
  </n-modal>

  <!--复制文件窗口-->
  <CopyFileDialog ref="copyFileDialogRef"></CopyFileDialog>


  <!--移动文件窗口-->
  <MoveFileDialog ref="moveFileDialogRef"></MoveFileDialog>

  <!-- 重命名窗口 -->
  <RenameFileDialog ref="renameFileDialogRef"></RenameFileDialog>
</template>

<script lang="ts" setup>
import {computed, onBeforeMount, onMounted, ref, toRefs, watch} from 'vue'
import {FilePanStore}  from '@/store/modules/file'
import {useRoute} from "vue-router"
import BreadCrumb from "@/components/file/common/BreadCrumb.vue"
import OperationMenu from "@/components/file/components/OperationMenu.vue"
import {fileController} from '@/api/file/fileController'
import { useMessage } from 'naive-ui'
import FileGrid from "@/components/file/components/FileGrid.vue"
//@ts-ignore
import Bus from '@/components/file/box/GlobalUploader/utils/bus.js'
import AddFolderDialog from '@/components/file/dialog/addFolder/Dialog.vue'
import CopyFileDialog from '@/components/file/dialog/copyFile/Dialog.vue'
import MoveFileDialog from '@/components/file/dialog/moveFile/Dialog.vue'
import RenameFileDialog from '@/components/file/dialog/renameFile/Dialog.vue'


import BoxMask from '@/components/file/box/imgPreview/BoxMask.vue'
import DeleteDialog from '@/components/file/dialog/deleteFile/Dialog.vue'
import VideoBox from '@/components/file/box/videoPreview/BoxMask.vue'
import AudioPlayer from 'vue3-audio-player'
import 'vue3-audio-player/dist/style.css'
import defaultMusicPng from '@/assets/images/file/file_music.png';

const imgPreviewRef = ref(null)
const deleteDialogRef = ref(null)
const videoBoxRef = ref(null)
const copyFileDialogRef = ref(null)
const moveFileDialogRef = ref(null)
const renameFileDialogRef = ref(null)

const message = useMessage()
const loading = ref(true); // 数据表格 - loading
const fileList = ref(); // 数据表格 - 文件列表
const fileNameSearch = ''; // 文件名搜索
const bodyStyle = {
    width: '600px'
}

const  segmented = {
    content: 'soft',
    footer: 'soft'
}

const showModal = ref(false)

const addFolderDialog = ref(null)

const pageSizes = [
  {
    label: '10 每页',
    value: 10
  },
  {
    label: '20 每页',
    value: 20
  },
  {
    label: '30 每页',
    value: 30
  },
  {
    label: '40 每页',
    value: 40
  }
]
const pageData = {
    currentPage: 1,
    pageCount: 50,
    total: 0
}; // 分页数据

const filePanStore = FilePanStore();

const $route = useRoute();

const {query} = toRefs($route)
let fileType = query.value.fileType ? Number(query.value.fileType) : 0
let filePath = query.value.filePath ? String(query.value.filePath) : '/'

const fileModel = computed(() => {
  return filePanStore.getFileModel;
})

const audioOption = ref({
    src: 'https://your-audio-file.mp3',
    title: 'your-audio-title',
    coverImage: 'https://your-cover-image.png',
})

watch($route, () => {
  const {query} = toRefs($route)
  fileType = query.value.fileType ? Number(query.value.fileType) : 0
  filePath = query.value.filePath ? String(query.value.filePath) : '/'


  setPageCount()
  getTableDataByType()
})


watch(() => filePath, () => {
  if ($route.name === 'File') {
      setPageCount()
      getTableDataByType()
  }
})


watch(() => fileType, () => {
  if ($route.name === 'File') {
      setPageCount()
      getTableDataByType()
  }
})

watch(() => fileModel, () => {
  setPageCount()
})

onBeforeMount(async () => {
  setPageCount()
  await getTableDataByType()
})

onMounted(() => {

  Bus.on('refreshFileList', () => {
    getTableDataByType()
  })

  Bus.on('showAddFolderDialog', () => {
    //@ts-ignore
    addFolderDialog.value.showDialog(filePath)
  })

  Bus.on('showCopyFileDialog', ({fileInfo = null}) => {
    console.log(fileInfo)
    //@ts-ignore
    copyFileDialogRef.value.handleCopyFileShow(fileInfo)
  })

  Bus.on('showMoveFileDialog', ({isBatchOperation = false , fileInfo=[] , deleteMode = 0}) => {
    console.log(fileInfo)
    //@ts-ignore
    moveFileDialogRef.value.handleMoveFileShow(isBatchOperation,fileInfo,deleteMode)
  })

  Bus.on('showRenameFileDialog',({oldName = '' , userFileId = ''}) => {
    //@ts-ignore
    renameFileDialogRef.value.showRenameFileDialog(oldName,userFileId)
  })

  Bus.on('imgPreview', ({imgList = [] , currentIndex = 0}) => {
    //@ts-ignore
    imgPreviewRef.value.showPreview(imgList,currentIndex)
  })

  Bus.on('showVideoBox', ({videoList = [] , currentIndex = 0}) => {
    //@ts-ignore
    videoBoxRef.value.previewVideo(videoList,currentIndex)
  })


  Bus.on('showAudioBox', ({audioList = [] , currentIndex = 0}) => {
      // console.log(audioList)
      // audioOption.value.src = audioList[0].fileUrl
      audioOption.value = {
        src: audioList[0].fileUrl,
        name: audioList[0].fileName,
        coverImage: defaultMusicPng,
      }
      showModal.value = true
  })


  /**
   * 初始化删除文件实例
   * @param {boolean} isBatchOperation 是否为批量删除：true - 批量删除，false - 单文件删除
   * @param {object | array} fileInfo 文件信息，批量时为数组、单文件时为对象
   * @param {number} deleteMode 删除模式：1-删除到回收站 2-彻底删除
   */
  Bus.on('showDeleteFile', ({isBatchOperation = false , fileInfo=[] , deleteMode = 0}) => {
    //@ts-ignore
    deleteDialogRef.value.showDeleteFileDialog(isBatchOperation , fileInfo , deleteMode)
  })

})


/**
* 表格数据获取相关事件 | 调整分页大小
*/
const setPageCount = () =>{
  pageData.currentPage = 1
  if (fileModel.value === 0) {
      pageData.pageCount = 50
  }
  if (fileModel.value === 1) {
      pageData.pageCount = 100
  }
}

const getTotalNum = () => {
  return `共${pageData.total}条`
}

const getTableDataByType = async () => {
  loading.value = true;
  if(Number(fileType)){
      switch (Number(fileType)){
          case 6: {
              showFileRecovery() //回收站
              break
          }
          default: {
              await showFileList() //
          }
      }
  } else {
      await showFileList()
  }
  // 获取当前存储空间使用情况
  filePanStore.showStorage();
}


/**
* 表格数据获取相关事件 | 获取回收站文件列表
*/
const showFileRecovery = () => {
  fileController.getRecoveryFile().then(res => {
      if (res.code ===200) {
          fileList.value = res.data
          loading.value = false
      } else {
          message.error(res.msg)
      }
  })
}


/**
 * 表格数据获取相关事件 | 分页组件 | 当前页码改变
 */
const handleCurrentChange = (currentPage) =>{
  pageData.currentPage = currentPage
  getTableDataByType()
}

/**
 * 表格数据获取相关事件 | 分页组件 | 页大小改变时
 */
const handleSizeChange = (pageCount) =>{
  pageData.pageCount = pageCount
  getTableDataByType()
}


/**
* 表格数据获取相关事件 | 获取当前路径下的文件列表
*/
const showFileList = async() => {
  let data = {
      fileType: fileType,
      filePath: filePath,
      currentPage: pageData.currentPage,
      pageCount: pageData.pageCount
  }
  loading.value = true
  const res = await fileController.getFileListByPath(data)
  if (res.code === 200) {
      fileList.value = res.data.records
      // pageData.total = Number(res.data.total)
      pageData.total = Number(res.data.total)
      loading.value = false
  } else {
      message.error(res.msg)
  }
}

</script>

